<template>
    <div class="chart-wrapper">
        <h3 class="chart-title">历年谷物产量排名</h3>
        <div class="rank-container">
            <dv-scroll-ranking-board :config="config" style="width:600px;height:450px" />
        </div>
    </div>
</template>

<script setup>
    import { reactive, onMounted } from 'vue';
    import axios from 'axios';
    const config = reactive({
        data: [
            { name: '-', value: 0 },
            { name: '-', value: 0 },
            { name: '-', value: 0 },
            { name: '-', value: 0 },
            { name: '-', value: 0 }
        ],
        rowNum: 5,           // 设置显示行数
        waitTime: 2000,      // 设置轮播时间间隔
        carousel: 'single',   // 设置轮播方式
        unit: '万吨'          // 设置单位
    })

    function getData(){
        axios.get('/api/queryAGR')
        .then((response)=>{
            if(response.data.code==200){
                console.log(response.data.data)
                let obj = reactive({})
                for(let index=0;index<response.data.data.length;index++){
                    let yobj = response.data.data[index];
                    obj = {
                        name: yobj.year,
                        value: yobj.cerealyield
                    }
                    config.data.push(obj)
                }
            }
        })
    }

    onMounted(()=>{
        getData();
    })
</script>

<style scoped>
.chart-wrapper {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: transparent;
}

.chart-title {
    color: #fff;
    margin: 0;
    font-size: 18px;
    margin-bottom: 10px;
    text-align: left;
    padding-left: 20px;
}

.rank-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>